<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link href="../lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--标题-->
<div class="container">
  <h3>标题</h3>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
</div>
<!--页面主体-->
<div class="container">
  <h3>页面主体</h3>
  <!--中心内容-->
  <!--通过添加 .lead 类可以让段落突出显示。-->
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eum, maiores minus neque nulla quam sunt? At consequatur delectus dignissimos eligendi id incidunt magnam sed suscipit veritatis vitae? Delectus, minima!</p>
  <p><mark>Lorem</mark> ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eum, maiores minus neque nulla quam sunt? At consequatur delectus dignissimos eligendi id incidunt magnam sed suscipit veritatis vitae? Delectus, minima!</p>
</div>
<!--内联文本元素-->
<div class="container">
  <h3>内联文本元素</h3>
  <mark>Marked text</mark>
  <del>被删除的文本</del>
  <s>无用文本</s>
  <ins>插入文本</ins>
  <u>带下划线的文本</u>
  <small>小号文本</small>
  <strong>着重</strong>
  <em>斜体</em>
</div>
<!--对齐-->
<div class="container">
  <h3>对齐</h3>
  <p class="text-left">text-left</p>
  <p class="text-center">text-center</p>
  <p class="text-right">text-right</p>
  <p class="text-justify">text-justify</p>
  <p class="text-nowrap">text-nowrap</p>
</div>
<!--改变大小写-->
<div class="container">
  <h3>改变大小写</h3>
  <p class="text-lowercase">转全小写tfssdfFSFSDFSDFDSFSD</p>
  <p class="text-uppercase">转全大写tfssdfFSFSDFSDFDSFSD</p>
  <p class="text-capitalize">转驼峰tfssdfFSFSDFSDFDSFSD</p>
</div>
<!--缩略语-->
<div class="container">
  <h3>缩略语</h3>
  <!--基本缩略语-->
  <div>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</div>
  <!--首字母缩略语-->
  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
</div>
<!--地址-->
<div class="container">
  <h3>地址</h3>
  <address>
    <b>meatball</b><br>
    1355 Market Street, Suite 900<br>
    San Francisco, CA 94103<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</div>
<!--引用-->
<div class="container">
  <h3>引用</h3>
  <!--默认样式的引用-->
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error magni modi, neque optio porro quidem! At cum doloremque dolorum eius facere ipsam ipsum laudantium, minima molestiae possimus sapiente temporibus.</p>
  </blockquote>
  <!--多种引用样式-->
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error magni modi, neque optio porro quidem! At cum doloremque dolorum eius facere ipsam ipsum laudantium, minima molestiae possimus sapiente temporibus.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
  <blockquote >
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error magni modi, neque optio porro quidem! At cum doloremque dolorum eius facere ipsam ipsum laudantium, minima molestiae possimus sapiente temporibus.</p>
    <footer class="blockquote-reverse">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
</div>
<!--列表-->
<div class="container">
  <h3>列表</h3>
  <h4>无序列表</h4>
  <!--移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的-->
  <!--通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。-->
  <ul class="list-unstyled list-inline">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
  </ul>
  <h4>有序列表</h4>
  <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
  </ol>
</div>
<!--描述-->
<div class="container">
  <h3>描述</h3>
  <!--带有描述的短语列表。-->
  <dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
  </dl>
  <!--.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。-->
  <dl class="dl-horizontal">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
  </dl>
</div>
<br><br><br><br><br><br>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
</body>
</html>